10. Flexbox

1. Display Flex (i.e flex)

01
02
03
04
05

2. Flex Direction (i.e flex-col)

01
02
03
04
05

3. Justify Content (i.e justify-xyz) [main axis pe apply hota hai]

justify-start

01
02
03
04
05

justify-end

01
02
03
04
05

justify-center

01
02
03
04
05

justify-between

01
02
03
04
05

justify-around

01
02
03
04
05

justify-evenly

01
02
03
04
05

4. Align Items (i.e items-xyz) [cross axis pe apply hota hai]

items-start

01
02
03
04
05

items-center

01
02
03
04
05

items-end

01
02
03
04
05

items-baseline

01
02
03
04
05

items-stretch

01
02
03
04
05

5. Order (by default, order is 0 for all elements) [jitna bada order utna bad me ayga]

01
02 (order-7)
03
04 (order-3)
05

6. Flex Grow and shrink (i.e flex-xyz)

01 (flex-none)
02 (flex-initial)
03(flex-auto)
04 (flex-1)
05
06
07

flex-none: prevents from growing or shrinking
flex-initial: shrink but not grow, taking into account its initial size
flex-auto: grow and shrink, taking into account its initial size
flex-1: grow and shrink as needed, ignoring its initial size

⬅️ ➡️